<!--
 * @Descripttion: 抽屉组件
 * @Author: YuZhenJing
 * @Date: 2020-01-15 09:50:07
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-27 16:19:49
 -->
<template>
  <el-drawer
    :before-close="beforeClose"
    :direction="direction"
    :size="size"
    :visible.sync="tfVisible"
    append-to-body
    class="asm-body"
    custom-class="tf-drawer"
  >
    <template v-slot:title>
      <div class="tf-drawer-header">
        <span style="padding-left: 10px">
          <i :class="titleIcon" v-if="titleIcon !== ''"></i>
          {{ title }}
        </span>
      </div>
    </template>
    <div class="tf-dialog-content">
      <slot name="content"></slot>
    </div>
    <div class="tf-dialog-footer" v-if="footerShow">
      <el-card shadow="always">
        <slot name="footer"></slot>
      </el-card>
    </div>
  </el-drawer>
</template>

<script>
export default {
  props: {
    // 标题图标
    titleIcon: {
      type: String
    },
    // 标题
    title: {
      type: String,
      required: true
    },
    // 抽屉大小
    size: {
      type: String,
      default: '30%'
    },
    // 显示抽屉
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    // 抽屉方向
    direction: {
      type: String,
      default: 'rtl'
    },
    // 关闭前回调函数
    beforeClose: {
      type: Function
    },
    // 是否显示底部区域
    footerShow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    tfVisible: {
      get() {
        return this.visible
      },
      set(s) {
        this.$emit('update:visible', s)
      }
    }
  }
}
</script>

<style lang="stylus" scope>
.tf-drawer
  .el-drawer__header
    margin 0px
    padding 0px
    .el-drawer__close-btn
      position absolute
      top 16px
      right 12px
      color #fff
      opacity 0.9
      font-size 1rem
      &:hover
        opacity 1
  .tf-drawer-header
    position absolute
    top 0px
    bottom 0px
    left 0px
    right 0px
    text-align left
    width 100%
    height 56px
    line-height 56px
    background linear-gradient(145deg, $primary 11%, $dark-primary 75%)
    background linear-gradient(145deg, var(--a-color-primary) 11%, var(--a-color-dark-primary) 75%)
    color #fff
    font-size 1rem
  .tf-dialog-content
    margin-top 56px
  .tf-dialog-footer
    position absolute
    right 0px
    left 0px
    bottom 0px
    .el-card__body
      padding 0px
    .el-card, .el-message
      border-radius 0px
</style>
